import styles from '../styles.less';
import {Space, Table, App, Tag} from 'antd';
import Opera from './Opera';
import {useCallback, useEffect} from 'react';
import {connect, useAccess} from 'umi';
import {ExclamationCircleFilled} from '@ant-design/icons';
import {STATUS} from "@/constants";

const DataTable = (props) => {

  const {modal} = App.useApp();
  const {dispatch, loading, list, submitting} = props;
  const {setDataForm, tablePayload, setTablePayload} = props.data;
  const access = useAccess();
  /* 获取列表 */
  const getAll = useCallback((payload) => {
    dispatch({
      type: 'PSystemRegion/getAll',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    getAll(tablePayload);
  }, [getAll, tablePayload]);

  /* 新增 */
  function add(e, record) {
    e.preventDefault();
    setDataForm({
      visible: true,
      title: '新增下级',
      data: undefined,
      parent: record,
    });
    return false;
  }

  /* 编辑 */
  function edit(e, record) {
    e.preventDefault();
    setDataForm({
      visible: true,
      title: '编辑操作',
      data: record,
    });
    return false;
  }

  /* 删除 */
  function del(e, record) {
    e.preventDefault();
    if (!submitting) {
      modal.confirm({
        title: '提示',
        icon: <ExclamationCircleFilled/>,
        content: '是否确定删除数据？',
        okText: "确认",
        cancelText: "取消",
        onOk() {
          dispatch({
            type: 'PSystemRegion/del',
            payload: [record.id],
            callback: () => {
              setTablePayload({...tablePayload});
            },
          });
        },
      });
    }
    return false;
  }

  const columns = [
    {
      title: '区县名称',
      dataIndex: 'name',
      align: 'left',
    },
    {
      title: '排序属性',
      dataIndex: 'orderby',
      align: 'center',
    },
    {
      title: '当前状态',
      dataIndex: 'status',
      align: 'center',
      render: (_, record) => {
        return (
          <Tag color={record.status === 1 ? 'geekblue' : 'volcano'}>
            {STATUS.get(record.status)}
          </Tag>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'option',
      align: 'center',
      render: (_, record) => (
        <Space size='small'>
          {access?.system_region_add && (
            <a onClick={e => add(e, record)}>新增</a>
          )}
          {access?.system_region_edit && (
            <a onClick={e => edit(e, record)}>编辑</a>
          )}
          {(access?.system_region_del && !record.children) && (
            <a onClick={e => del(e, record)}>删除</a>
          )}
        </Space>
      ),
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Opera data={{setDataForm}}/>
        <Table
          loading={loading} rowKey={'id'}
          className={styles.myTable} bordered={false} size={'middle'}
          columns={columns} dataSource={list} pagination={false}
          scroll={{y: '100%'}}
        />
      </div>
    </>
  );
};

export default connect(({loading, PSystemRegion}) => {
  return {
    loading: loading.effects['PSystemRegion/getAll'],
    submitting: loading.effects['PSystemRegion/del'],
    list: PSystemRegion.list,
  };
})(DataTable);
